<!DOCTYPE html>
<html>
  <head>
    <title>Popcorn Youtube Player Example</title>
      <script src="../../popcorn.js"></script>
      <script src="../../modules/player/popcorn.player.js"></script>
      <script type="text/javascript" src="popcorn.youtube.js"></script>
      <script src="../../plugins/footnote/popcorn.footnote.js"></script>
      <script src="../../plugins/flickr/popcorn.flickr.js"></script>
      <script src="../../plugins/webpage/popcorn.webpage.js"></script>
      <script src="../../plugins/googlefeed/popcorn.googlefeed.js"></script>
      <script src="../../plugins/image/popcorn.image.js"></script>
      <script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
      <script>
        // Helper function to get elements
        function element(id) {

          return document.getElementById(id);
        }

        document.addEventListener( 'DOMContentLoaded', function() {
          var paused = true,
              popcorn;

          popcorn = Popcorn.youtube( '#video', 'http://www.youtube.com/watch?v=nfGV32RNkhw&autoplay=0' );

          popcorn = popcorn
            .footnote({
              start: 5,
              end: 40,
              text: 'The video is "RiP: A Remix Manifesto", by Brett Gaylor',
              target: 'footnotediv'
            })
            .flickr({
              start: 20,
              end: 40,
              tags: 'georgia',
              numberofimages: '8',
              target: 'flickrdiv'
            })
            .subtitle({
              start: 5,
              end: 15,
              text: 'This is overlaid on top of the video. You can hightlight it!',
              display: 'inline',
              language: "en"
            })
            .webpage({
              id: "webpages-a",
              start: 0,
              end: 15,
              src: 'http://webmademovies.org/',
              target: 'webpagediv'
            })
            .googlefeed({
              start: 0,
              end: 15,
              target: "feeddiv",
              url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml",
              title: "Planet Feed",
              orientation: "Vertical"
            })
            .image({
              start: 5,
              end: 15,
              href: 'http://www.drumbeat.org/',
              src: 'https://www.drumbeat.org/media//images/drumbeat-logo-splash.png',
              target: 'imagediv'
            })
          .on( 'durationchange', function() {
            element( 'player-duration' ).innerHTML = popcorn.duration();
          })
          .on( 'volumechange', function() {
            element( 'player_vol' ).innerHTML = popcorn.volume();
          })
          .on( 'timeupdate', function() {
            element( 'player-time' ).innerHTML = popcorn.currentTime();
          })
          // Update button labels
          .on( 'play' , function() {
            paused = false;
            element( 'btn-play-pause' ).innerHTML = 'Pause';
          })
          .on('pause', function() {
            paused = true;
            element( 'btn-play-pause' ).innerHTML = 'Play';
          });

          element( 'player-status' ).innerHTML = 'Ready';
          element( 'player_vol' ).innerHTML = popcorn.volume();

          // Single play/pause button
          element( 'btn-play-pause' ).addEventListener( 'click', function() {
            if ( paused ) {
              popcorn.play();
            } else {
              popcorn.pause();
            }
          }, false);

          // Seek
          element('btn-seek').addEventListener('click', function() {

            popcorn.currentTime( 30 );
          }, false);

          // Volume
          element('btn-volume').addEventListener('click', function() {
            var volume = (popcorn.volume() === 1) ? 0.5 : 1;
            popcorn.volume(volume);
          }, false);

          element('btn-mute').addEventListener('click', function() {
            popcorn.mute( !popcorn.media.muted );
          }, false);
        }, false );
    </script>
  </head>
  <body>
    <div>
      <div>
        <div id="video" style="width: 640px; height: 390px;" ></div><br />
        <button class="simple" id="btn-play-pause">Play</button>
        <button class="seek" id="btn-seek">Seek to 30</button>
        <button class="volume" id="btn-volume">Toggle Volume</button>
        <button class="mute" id="btn-mute">Toggle Mute</button>
        <div>
          <ul>
            <li>Status: <span id="player-status">Not Ready</span></li>
            <li>Current Time (s): <span id="player-time"></span></li>
            <li>Volume (0-1): <span id="player_vol"></span></li>
            <li>Video Duration (s): <span id="player-duration"></span></li>
          </ul>
        </div>
      </div>
      <div>
        <h3>Description</h3>
        <p>
          This demo will showcase how a Youtube flash video can be integrated into Popcorn. This  is done by making the flash video masquerade as HTML 5 video.<br />
          Due to the Flash security model, this demo must be  run from a web server<br />
          From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.
        <hr >
          Youtube does support their player to be chromeless (hidden controls), but their controls are left in to provide richer interaction.<br />
          Custom controls have been developed and tied into their player for this demo.<br />
          Clicking play/pause or seeking in either the video or via custom controls will cause the other to update.<br />
          The video can be specified in the HTML source by giving the youtube web site url (http://www.youtube.com/watch?v=VIDEOID) to either Popcorn.youtube or as the div src attribute.<br/>
        </p>
        <h4>Expected Events</h4>
        <ul>
          <li>From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.</li>
          <li>From 20 to 40 seconds, the a flickr stream of 8 images  tagged 'georgia' will appear below 'Flickr Area'.</li>
          <li>From 5 to 15 seconds, the Mozilla Drumbeat logo will appear below 'Image Area'.</li>
          <li>From 5 to 15 seconds, the subtitle 'This is overlaid on top of the video. You can hightlight it!' will appear in front of the video.</li>
          <li>From 0 to 20 seconds, blogs from 'http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml' will appear below 'Google Feed Area'.</li>
          <li>From 0 to 15 seconds, the site 'http://webmademovies.org/' will appear below 'Web Page Area'.</li>
        </ul>
      </div>
      <div id="footnotediv" width="50%" height="50%">
        <strong>Footnote Area</strong><br />
      </div>
      <div id="flickrdiv" width="50%" height="50%">
        <strong>Flickr Area</strong><br />
      </div>
      <div id="imagediv" width="50%" height="50%">
        <strong>Image Area</strong><br />
      </div>
      <div id="feeddiv" width="50%" height="50%">
        <strong>Google Feed Area</strong><br />
      </div>
      <div id="webpagediv" width="100px" height="50px">
        <strong>Web Page Area</strong><br />
      </div>
    </div>
  </body>
</html>
